<template>
    <a-form ref="formRef" :model="model" :rules="rules" v-bind="formItemLayout">
        <a-row :gutter="10">
            <a-col :span="12">
                <a-form-item label="发文范围" name="receiptRange">
                    <a-input v-model:value="model.receiptRange" disabled placeholder="请选择发文范围"/>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="发送群组" name="emailGroup">
                    <a-select v-model:value="model.emailGroup" :options="emailGroupOptions" :allowClear="true" mode="multiple" placeholder="请选择发送群组"/>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="发送个人邮箱" name="userGroup">
                    <a-select v-model:value="model.userGroup" :options="userGroupOptions" :allowClear="true" mode="multiple" placeholder="请选择发送个人邮箱"/>
                </a-form-item>
            </a-col>
        </a-row>
    </a-form>
</template>

<script lang='ts' setup>
    import { ref, computed } from 'vue';
    defineOptions({
        /** 发文范围表单 */
        name: 'FileReceiptRangeForm',
    });

    const model = defineModel({
        type: Object, // 类型检查
        required: true, // 是否必填
        // 默认值
        default: {
            receiptRange: 'Western QMS', // 发文范围
            emailGroup: [], // 发送群组
            userGroup: [], // 发送个人邮箱
        }, 
    });
    const formRef = ref();

    const rules = ref({
        emailGroup: [{ required: true, type: 'array', message: '请选择发送群组', trigger: 'change' }],
        // userGroup: [{ required: true, type: 'array', message: '请选择发送个人邮箱', trigger: 'change' }],
    });
    const formItemLayout = ref({
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
    });
    const emailGroupOptions = computed(() => {
        return [
            { label: 'IOT (Automation)/IOT (Automation)', value: '01' },
            { label: 'Software Solution/Software Solution', value: '02' },
            { label: 'CMI/CMI', value: '03' },
            // ...
        ]
    });
    const userGroupOptions = computed(() => {
        return [
            { label: 'ahernandez31/Agustin Aguilera Hernandez', value: 'ahernandez31' },
            { label: 'arenteria2/Angel Daniel Renteria Almaraz', value: 'arenteria2' },
            { label: 'atorre2/Adriana Lievano de la Torre', value: 'atorre2' },
            // ...
        ]
    });

    // 校验方法
    function validate() {
        return new Promise((resolve) => {
            formRef.value.validate().then((values) => {
                console.log('values', values);
                resolve({valid: true, values});
            })
            .catch(error => {
                console.log('error', error);
                resolve({valid: false, values: error?.values});
            });
        })
    }
    // 对外暴露属性方法
    defineExpose({
        validate,
    });
</script>

<style scoped lang="less">
</style>